<template>
    <section class="circle-delist">
        <Header style="z-index:1025">
            <header-menu :index="'4-1'"></header-menu>
        </Header>
        <top-search :navlist="NavTitle"></top-search>
        <user-nav :list="listTitle"></user-nav>
        <cricle-top :toplist="toplist"></cricle-top>
        <div class="container">
            <div class="circle-left">
             <!--<H1>毕业季，变美要趁早——韩国利农(郑州分院)</H1>-->
                <p><span>【活动状态】</span>:{{list.start_status}}</p>
                <p><span>【活动时间】</span>: {{list.starttime | formatDate}}——{{list.endtime | formatDate}}</p>
                <p><span>【活动奖励】</span>:  {{list.reward}}</p>
                <p><span>【活动详情】</span>:  {{list.content}}
                </p>
                <div class="jieshao clearfix">
                    <p><span>【参加者条件】</span></p>
                     {{list.condition}}
                </div>
            </div>
            <div class="circle-right">
                <div class="my-integral">
                    <p>我的积分 ：100</p><span @click="baom()" style="cursor: pointer">{{text}}</span>
                </div>
                <user-list :userlist="userlist"></user-list>
                <side-list :list="sidelist"></side-list>
            </div>
            <div style="clear: both"></div>
        </div>

        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </section>
</template>

<script>
    import HeaderMenu from '@/components/Header/'
    import TopSearch from '../../components/TopSearch/'
    import PageFooter from '../../components/Footer/'
    import BottomIcon from '../../components/BottomIcon/'
    import CricleTop from '../../components/Circle/Cricle-top'
    import SideList from "@/components/SideMenu/SideList"
    import userNav from '../../components/Usertop/userNav'
    import CricleIntegral from '../../components/Circle/CricleIntegral'
    import UserList from '../../components/Circle/UserList'
    export default {
        name: "CircleDelist",
        components: {
            PageFooter,
            BottomIcon,
            HeaderMenu,
            CricleTop,
            SideList,
            userNav,
            TopSearch,
            CricleIntegral,
            UserList
        },
        data () {
            return {
                NavTitle:{
                    id:1,
                    name:'圈子',
                    title:'越泡越美  越美越泡',
                    text:'写帖子',
                    mytext:'我的帖子'
                },
                sidelist: [
                    {
                        id: 1,
                        name: '竞价排名',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 4,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 2,
                        name: '大家正在预约',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 3,
                        name: '新品推荐',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 4,
                        name: '相关推荐',
                        relevant:1,
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二功能与美学矫正二功能与美学矫正二功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二功能与美学矫正二功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二功能与美学矫正二功能与美学矫正二功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                ],
                listTitle: [
                    {id:1,name:"广场",show:false,path:'/circle',
                        child: {id:4,name:"帖子详情",show:false,path:'/circledelist',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {id:2,name:"活动",show:true,path:'/activity',
                        child: {id:4,name:"活动详情",show:false,path:'/activitydelists',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {id:3,name:"专题",show:false,path:'/special',
                        child: {id:4,name:"活动详情",show:false,path:'/specialdelist',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        },
                    },
                    {
                        id: 4, name: "达人", show: false, path: '/aman',
                        child: {id: 4, name: "达人详情", show: false, path: '/amandelists',
                            child: {id:4,name:"报名人数",show:false,path:''},
                        }
                    }
                ],
                userlist: [
                    {id:1,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id:2,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id:3,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id:4,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id:5,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id:6,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id:7,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id:8,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id:9,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id:10,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                    {id:11,img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                ],
                id:'',
                list:{},
                starttime:"",
                toplist: [
                    {id:1,num:12345,altogether:123456,type:1},
                ],
                text:'报名'
            }
        },
        created () {
          this.getinfo()
        },
        filters:{
            formatDate:function(time){
                var date = new Date(time * 1000);
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                var D = date.getDate() + ' ';
                var h = date.getHours() + ':';
                var m = date.getMinutes() + ':';
                var s = date.getSeconds();
                return Y+M+D;
            },
        },
        methods: {
            getinfo () {
               this.id = this.$route.query.id
                let _this =this
                _this.$post('/api/activity/activityInfo',
                    {
                        activity_id:_this.id
                    }, function (res) {
                        _this.list =res.data
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            baom () {
                let _this =this
                _this.$post('/api/activity/signActivity',
                    {
                        token:_this.$token,
                        activity_id:_this.id
                    }, function (res) {
                        _this.$message.success(res.msg);
                        _this.text = '已报名'
                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            }
        }
    }
</script>

<style scoped lang="less">
    .swiper{
        height: 375px;
        img{
            width: 1917px;
            height: 375px;
        }
    }
    .circle-left{
        width: 850px;
        float: left;
        h1{
            text-align: center;
            font-weight: normal;
            color: #333333;
            padding-bottom: 40px;
        }
        >p{
            padding-bottom: 40px;
            font-size: 16px;
            color: #333333;
            span{
                color: #fc5370;
            }
        }
        div{
            p{
                font-size: 16px;
                color: #333333;
                padding-bottom: 10px;
            }
            span{
                color: #fc5370;
                font-size: 16px;
            }

        }
        .jieshao{
            margin-bottom: 40px;
            img{
                float: left;
                margin-right: 20px;
                margin-left: 90px;
            }
            p{
                line-height: 30px;
            }
        }
        .anlie{
            >:first-child{
                padding-left: 0;
            }
            p{
                padding-left: 90px;
            }
            .img{
                margin-bottom: 15px;
                padding-left: 90px;
            }
        }

    }
    .circle-right{
        float: right;
        width: 260px;
        >.my-integral{
            width: 260px;
            height: 60px;
            background-color: #ffffff;
            border-radius: 4px;
            border: solid 1px #ff5371;
            >p{
                line-height: 58px;
                text-align: center;
                width: 150px;
                font-family: MicrosoftYaHei;
                font-size: 19px;
                letter-spacing: 0px;
                color: #ff5371;
                float: left;
            }
            span{
                float: right;
                display: block;
                width: 92px;
                height: 58px;
                background-color: #ff5371;
                border-radius: 4px;
                border: solid 1px #ff5371;
                text-align: center;
                color: white;
                line-height: 60px;
                font-size: 20px;
            }
        }
    }
</style>